<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <category @tree-node-click="treeNode"></category>
    </el-col>
    <el-col :span="18">
      <div class="mod-product__attrgroup}">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataListQuery()"
        >
          <el-form-item>
            <el-input
              v-model="dataForm.attrGroupId"
              placeholder="请输入分组id"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataListQuery()">{{ $t("query") }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="exportHandle()">{{
              $t("export")
            }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="$hasPermission('product:attrgroup:save')"
              type="primary"
              @click="addOrUpdateHandle()"
              >{{ $t("add") }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="$hasPermission('product:attrgroup:delete')"
              type="danger"
              @click="deleteHandle()"
              >{{ $t("deleteBatch") }}</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          @selection-change="dataListSelectionChangeHandle"
          style="width: 100%;"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="attrGroupId"
            label="分组id"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="attrGroupName"
            label="组名"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sort"
            label="排序"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="descript"
            label="描述"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="icon"
            label="组图标"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="catelogId"
            label="所属分类id"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="所属分类名称"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('handle')"
            fixed="right"
            header-align="center"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                v-if="$hasPermission('product:attrgroup:update')"
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row.attrGroupId)"
                >{{ $t("update") }}</el-button
              >
              <el-button
                v-if="$hasPermission('product:attrgroup:delete')"
                type="text"
                size="small"
                @click="deleteHandle(scope.row.attrGroupId)"
                >{{ $t("delete") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pages.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pages.pageSize"
          :total="pages.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
        <!-- 弹窗, 新增 / 修改  refreshDataList监听子组件的事件，当修改完成后执行这个方法 -->
        <add-or-update
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshDataList="getDataListQuery"
        ></add-or-update>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import category from "../common/category";
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./attrgroup-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/gulimall-product/product/attrgroup/page",
        getDataListIsPage: true,
        exportURL: "/gulimall-product/product/attrgroup/export",
        deleteURL: "/gulimall-product/product/attrgroup",
        deleteIsBatch: true,
      },
      rows: {},
      // page: {
      //   pageNo: 1,
      //   pageSize: 10,
      //   catId: undefined,
      //   totalPages: undefined,
      //   total: undefined,
      // },
      pages: {
        pageNo: 1,
        pageSize: 10,
        catId: undefined,
        totalPages: undefined,
        total: undefined,
        attrGroupId:undefined
      },
    };
  },
  components: {
    category,
    AddOrUpdate,
  },
  created() {
    this.getDataListQuery();
  },
  methods: {
    getDataListQuery() {
      //根据catid分页查询数据
      var { pageNo, pageSize, catId , attrGroupId} = this.pages;
      let req = { pageNo, pageSize, catId, attrGroupId };
      this.$http
        .post("/gulimall-product/product/attrgroup/pageQuery", req)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.rows;
          var { pageNo, pageSize, total, totalPages } = res.data;
          this.pages = { pageNo, pageSize, total, totalPages };
        })
        .catch(() => {});
    },
    treeNode(data, node, component) {
      if (node.level === 3) {
        this.pages.catId = data.catId;
        console.log("object",data);
        this.getDataListQuery();
      }
    },
  },
};
</script>

<style></style>
